<template>
   <div class="classInfoList basicInfoLayout">
        <div class="classInfoList basicInfoLayout">
            <div class="tableTitle">
              <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
              <div class="tableText">会员等级</div>
            </div>
            <ul class="memberLevel">
              <li v-for="(levelItem, key, index) in levelHistory" :key="index">
                <h2><label>当前等级</label>{{levelItem.currentLevel}}</h2>
                <h2><label>原等级:</label>{{levelItem.originalLevel}}</h2>
                <h2><label>变更时间:</label>{{levelItem.createTime}}</h2>
              </li>
            </ul>
            <div class="tableTitle">
              <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
              <div class="tableText">会员权益</div>
            </div>
            <ul class="memberEquity" v-if="equityData">
              <li v-for="(equityItem,index) in equityData" :key="index">
                <span>{{equityItem}}</span>
              </li>
            </ul>
          </div>
        <!-- <ul>
            <li v-for="(ele,index) in classItem.basicDataChild" :key="index" v-if="ele.status == 'basic'">
                <label>{{ele.label}}</label>
            </li>
            <li v-for="(ele,index) in classItem.basicDataChild" :key="index" v-if="ele.status == 'card'" class="card">
                <label>{{ele.label}}</label>
            </li>
        </ul> -->
    </div>
</template>

<script>
export default {
    name:'levelEquity',
    data(){
        return{
            
        }
    },
    props:{
        levelHistory:{
            type:Array
        },
        equityData:{
            type:Array
        }
    }
}
</script>

<style>
.basicInfoLayout ul{
  background-color: #fff;
  padding: 0 24px
}
.basicInfoLayout ul li{
  display: inline-block;
  margin-bottom: 14px
}
.basicInfoLayout ul li label{
		color: #888;
    font-size: 14px;
	}
.basicInfoLayout ul li span{
    color: #222;
    font-size: 14px;
}

/*等级权益*/
.classInfoList ul.memberLevel li{
  width: 100%
}
.classInfoList ul.memberEquity li{
  width: 214px;
  height: 74px;
  line-height:74px;
	background-image: linear-gradient(-40deg,#7b5e43 0%, #96765a 100%), linear-gradient(#7e6b5a,#7e6b5a);
	background-blend-mode: normal, normal;
  border-radius: 4px;
  text-align:center;
  margin-right:24px
}
.classInfoList ul.memberEquity li::last-child{
  margin-right:0
}
.classInfoList ul.memberEquity li span{
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;;
  font-size: 16px;
  color:#fff
}
.classInfoList ul li h2{
  display: inline-block;
  float: left;
  width:24%;
  font-size:14px;
  color:#222
}
.classInfoList ul li h2 label{
  color:#888;
  margin-right:6px
}
</style>



